<template>
	<!-- 定义一个容器用于显示网络拓扑图 -->

	<!-- 展示组件的容器 -->
	<div v-if="showDetail" style="position: relative; top: 0; left: 0; width: 100%; height: 100%;">
		<el-icon class="return-icon" @click="showOriginalTopology">
			<Back />
		</el-icon>
		<component :is="currentComponent" :name="selectedNodeName" ref="detailComponent"></component>
	</div>
	<div v-else id="upf-topology" style="width: 100%; height: 90%;"></div>
	<!-- <el-button @click="last">last</el-button>
	<el-button @click="nextt">next</el-button> -->
</template>

<script>
import * as echarts from 'echarts';
import Result from '@/components/echarts/system/ResultGraph.vue';

export default {
	name: 'UpfTopology',
	components: {
		Result,
	},
	data() {
		return {
			myChart: null,
			showDetail: false, // 控制是否展示详情
			selectedNodeName: '', // 存储点击的节点名称
			currentComponent: null,
			currentState: 0, // 当前状态索引
			sizeState: 3,
			ws: null,  // WebSocket 连接对象
			message: '',
			topologyOptions: [
				{
					tooltip: {},
					graphic: [
						{
							type: 'rect',
							shape: {
								x: 200, // 左上角 x 坐标
								y: 70, // 左上角 y 坐标
								width: 500, // 宽度
								height: 500, // 高度
							},
							style: {
								stroke: '#FFFFFF', // 边框颜色
								lineWidth: 5, // 边框宽度
								fill: 'none', // 无填充
								lineDash: [4, 6], // 虚线样式
							},
						},
					],
					series: [
						{
							type: 'graph',
							layout: 'none',
							data: [
								{ name: '目标检测发送端', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'FTP发送端', x: 0, y: 60, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'NWDAF', x: 80, y: -40, symbol: 'image://' + require('@/assets/icon/leaf2.png'), symbolSize: [70, 80], itemStyle: { color: 'green' } },
								{ name: 'SMF', x: 120, y: -40, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [70, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-0', x: 50, y: 30, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-1', x: 100, y: 0, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-2', x: 100, y: 60, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-3', x: 150, y: 30, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-0c', x: 50, y: 35, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: 'UPF-1c', x: 100, y: 5, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: 'UPF-3c', x: 150, y: 35, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: '目标检测接收端', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'FTP接收端', x: 200, y: 60, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
							],
							links: [
								{ source: '目标检测发送端', target: 'UPF-0', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-0', target: 'UPF-1', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-1', target: 'UPF-3', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-3', target: '目标检测接收端', lineStyle: { color: '#00FF9C' } },
								{ source: 'FTP发送端', target: 'UPF-0c', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-0c', target: 'UPF-1c', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-1c', target: 'UPF-3c', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-3c', target: 'FTP接收端', lineStyle: { color: '#FFB22C' } },
							], // 初始化为空
							label: {
								show: true,
								position: 'bottom',
								formatter: '{b}',
								color: 'white',
								fontSize: 25,
							},
							lineStyle: {
								curveness: 0,
								width: 5,
								color: 'white',
								opacity: 1
							},
						}
					],

				},
				{
					tooltip: {},
					graphic: [
						{
							type: 'rect',
							shape: {
								x: 200, // 左上角 x 坐标
								y: 70, // 左上角 y 坐标
								width: 500, // 宽度
								height: 500, // 高度
							},
							style: {
								stroke: '#FFFFFF', // 边框颜色
								lineWidth: 5, // 边框宽度
								fill: 'none', // 无填充
								lineDash: [4, 6], // 虚线样式
							},
						},
					],
					series: [
						{
							type: 'graph',
							layout: 'none',
							data: [
								{ name: '目标检测发送端', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'FTP发送端', x: 0, y: 60, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'NWDAF', x: 80, y: -40, symbol: 'image://' + require('@/assets/icon/leaf2.png'), symbolSize: [70, 80], itemStyle: { color: 'green' } },
								{ name: 'SMF', x: 120, y: -40, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [70, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-0', x: 50, y: 30, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-1', x: 100, y: 0, symbol: 'image://' + require('@/assets/icon/err_server.png'), symbolSize: [90, 80], itemStyle: { color: 'red' } },
								{ name: 'UPF-2', x: 100, y: 60, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-3', x: 150, y: 30, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-0c', x: 50, y: 35, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: 'UPF-1c', x: 100, y: 5, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: 'UPF-3c', x: 150, y: 35, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: '目标检测接收端', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'FTP接收端', x: 200, y: 60, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
							],
							links: [
								{ source: '目标检测发送端', target: 'UPF-0', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-0', target: 'UPF-1', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-1', target: 'UPF-3', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-3', target: '目标检测接收端', lineStyle: { color: '#00FF9C' } },
								{ source: 'FTP发送端', target: 'UPF-0c', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-0c', target: 'UPF-1c', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-1c', target: 'UPF-3c', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-3c', target: 'FTP接收端', lineStyle: { color: '#FFB22C' } },
							], // 初始化为空
							label: {
								show: true,
								position: 'bottom',
								formatter: '{b}',
								color: 'white',
								fontSize: 25,
							},
							lineStyle: {
								curveness: 0,
								width: 5,
								color: 'white',
								opacity: 1
							},
						}
					],

				},
				{
					tooltip: {},
					graphic: [
						{
							type: 'rect',
							shape: {
								x: 200, // 左上角 x 坐标
								y: 70, // 左上角 y 坐标
								width: 500, // 宽度
								height: 500, // 高度
							},
							style: {
								stroke: '#FFFFFF', // 边框颜色
								lineWidth: 5, // 边框宽度
								fill: 'none', // 无填充
								lineDash: [4, 6], // 虚线样式
							},
						},
					],
					series: [
						{
							type: 'graph',
							layout: 'none',
							data: [
								{ name: '目标检测发送端', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'FTP发送端', x: 0, y: 60, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'NWDAF', x: 80, y: -40, symbol: 'image://' + require('@/assets/icon/leaf2.png'), symbolSize: [70, 80], itemStyle: { color: 'green' } },
								{ name: 'SMF', x: 120, y: -40, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [70, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-0', x: 50, y: 30, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-1', x: 100, y: 0, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-2', x: 100, y: 60, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-3', x: 150, y: 30, symbol: 'image://' + require('@/assets/icon/nwdaf2.png'), symbolSize: [90, 80], itemStyle: { color: 'green' } },
								{ name: 'UPF-0c', x: 50, y: 35, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: 'UPF-1c', x: 100, y: 5, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: 'UPF-3c', x: 150, y: 35, symbol: 'none', symbolSize: [60, 50], itemStyle: { color: 'green' }, label: { show: false } },
								{ name: '目标检测接收端', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
								{ name: 'FTP接收端', x: 200, y: 60, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [70, 70] },
							],
							links: [
								{ source: '目标检测发送端', target: 'UPF-0', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-0', target: 'UPF-1', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-1', target: 'UPF-3', lineStyle: { color: '#00FF9C' } },
								{ source: 'UPF-3', target: '目标检测接收端', lineStyle: { color: '#00FF9C' } },
								{ source: 'FTP发送端', target: 'UPF-0c', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-0', target: 'UPF-2', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-2', target: 'UPF-3', lineStyle: { color: '#FFB22C' } },
								{ source: 'UPF-3', target: 'FTP接收端', lineStyle: { color: '#FFB22C' } },
							], // 初始化为空
							label: {
								show: true,
								position: 'bottom',
								formatter: '{b}',
								color: 'white',
								fontSize: 25,
							},
							lineStyle: {
								curveness: 0,
								width: 5,
								color: 'white',
								opacity: 1
							},
						}
					],

				},
			]
		};
	},
	watch: {
		currentState(newValue) {
			if (newValue >= this.topologyOptions.length) {
				newValue = newValue % this.topologyOptions.length;
			}
			if (this.myChart) {
				this.myChart.setOption(this.topologyOptions[newValue]);
			}
		}
	},
	mounted() {
		this.initChart();
		this.connectWebSocket();
		console.log(this.ws);
	},
	beforeDestroy() {
		// 关闭 WebSocket 连接
		if (this.ws) {
			this.ws.close();
		}
	},
	methods: {
		connectWebSocket() {
			// 创建 WebSocket 连接
			this.ws = new WebSocket("ws://10.112.51.79:38414/ws");

			// 监听消息
			this.ws.onmessage = (event) => {
				console.log("Received:", event.data);
				this.message = event.data; // 显示接收到的消息
				if (this.message.includes("U 1")) {
					this.next(1);
				} else if (this.message.includes("H 1 2")) {
					this.next(2);
				} else if (this.message.includes("D 2")) {
					this.next(0);
				}
			};

			// 监听 WebSocket 连接关闭
			this.ws.onclose = () => {
				console.log("WebSocket connection closed");
			};

			// 监听 WebSocket 错误
			this.ws.onerror = (error) => {
				console.error("WebSocket error:", error);
			};
		},
		sendMessage() {
			if (this.ws && this.ws.readyState === WebSocket.OPEN) {
				// 发送消息
				this.ws.send("Hello from Vue!");
			}
		},
		initChart() {
			const container = document.getElementById('upf-topology');
			if (container) {
				this.myChart = echarts.init(container);
				this.myChart.setOption(this.topologyOptions[this.currentState]);
			}
			// 添加点击事件
			this.myChart.on('click', this.handleNodeClick);
		},
		handleNodeClick(params) {
			this.selectedNodeName = params.name.toLowerCase(); // 更新点击的节点名称
			const componentMap = {
				'UPF-0': "Result",
				'UPF-1': "Result",
				'UPF-2': "Result",
				'UPF-3': "Result",
			};
			const componentName = componentMap[params.name];
			if (componentName) {
				this.currentComponent = componentName;
				this.showDetail = true;
			}
		},
		showOriginalTopology() {
			this.showDetail = false; // 隐藏详情，展示原始拓扑图
			this.currentComponent = null;
			this.selectedNodeName = ''; // 重置点击的节点名称
			this.clearIntervalInComponent(); // 清除子组件中的定时器
			if (this.myChart) {
				this.myChart.dispose();
			}
			// 重新初始化图表
			this.$nextTick(() => {
				this.initChart();
			});

			// 如果子组件存在且有销毁图像的方法，调用销毁方法
			const detailComponent = this.$refs.detailComponent;
			if (detailComponent && detailComponent.destroyChart) {
				detailComponent.destroyChart(); // 调用子组件的销毁方法
			}
		},
		clearIntervalInComponent() {
			if (this.$refs.detailComponent && this.$refs.detailComponent.intervalId) {
				clearInterval(this.$refs.detailComponent.intervalId);
			}
		},
		last() {
			this.currentState = (this.currentState - 1 + this.sizeState) % this.topologyOptions.length;
			this.switchChart();
		},
		nextt() {
			this.currentState = (this.currentState + 1) % this.topologyOptions.length;
			this.switchChart();
		},
		next(index) {
			console.log("next: " + index);
			this.currentState = index;
			this.switchChart();
		},
		// 切换图表
		switchChart() {
			// if (this.myChart) {
			// 	this.myChart.dispose(); // 销毁当前图表实例
			// }
			// this.$nextTick(() => {
			// 	this.initChart(); // 重新初始化图表
			// });
			if (this.myChart) {
				this.myChart.setOption(this.topologyOptions[this.currentState]);
			}
		},
	}
};
</script>

<style scoped>
/* 设置容器的宽度和高度 */
#upf-topology {
	position: relative;
	width: 100%;
	height: 100%;
}

.return-icon {
	position: absolute;
	left: 10px;
	top: -45px;
	background-color: transparent;
	color: cyan;
	font-size: 50px;
	cursor: pointer;
	outline: none;
	z-index: 1;
}

.return-icon::after {
	content: '返回';
	/* 这是要显示的文字 */
	position: absolute;
	left: 100%;
	/* 将文字放置在图标的右侧 */
	top: 50%;
	transform: translateY(-50%);
	/* 垂直居中对齐 */
	white-space: nowrap;
	/* 防止文字换行 */
	background-color: transparent;
	/* 背景颜色 */
	color: cyan;
	/* 文字颜色 */
	padding: 2px 4px;
	/* 内边距 */
	border-radius: 4px;
	/* 圆角 */
	opacity: 0;
	/* 默认隐藏 */
	transition: opacity 0.3s;
	/* 过渡效果 */
	pointer-events: none;
	/* 防止伪元素影响点击事件 */
	font-size: 30px;
	font-weight: bold;
}

.return-icon:hover::after {
	opacity: 1;
	/* 鼠标悬停时显示 */
	pointer-events: auto;
	/* 鼠标悬停时允许点击 */
}

.switch {
	position: absolute;
	top: 10px;
	right: 80px;
}
</style>